<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="jquery.min.js"></script>
    <title>购物车_计算商品总件数和总金额</title>
    <style>
        input.price,input.text,input.all{
            width: 50px;
            height: 20px;
            margin-right: 30px;
            margin-bottom: 30px;
        }
        input.text{
            text-align: center;
            margin: 0;
        }
        input.increment{
            margin-right: 30px;
        }
    </style>
</head>
<body>
    <!-- 全选操作：在购物车勾选商品时，实现点击全选按钮，商品的小圆点也全部选中，   -->
    全选：<input type="checkbox" class="checkall"><br>

    <div class="box">
        <input type="checkbox" class="j-checkbox"><!-- 复选框 -->
        单价：<text class='price'>12.30</text><!-- 单价价格 -->
        <input type="button" value="-" class='delcrement'><!-- 减号按钮 -->
        <input type="text" class='text' value='1'><!-- 表单框，显示商品数量 -->
        <input type="button" value="+" class='increment'><!-- 加号按钮 -->
        小计：<text class='all'>12.30</text><!-- 单类商品的总价 -->
    </div>
    <div class="box">
        <input type="checkbox" class="j-checkbox">
        单价：<text class='price'>21.90</text>
        <input type="button" value="-" class='delcrement'>
        <input type="text" class='text' value='1'>
        <input type="button" value="+" class='increment'>
        小计：<text class='all'>21.90</text>
    </div>
    <div class="box">
        <input type="checkbox" class="j-checkbox">
        单价：<text class='price'>18.99</text>
        <input type="button" value="-" class='delcrement'>
        <input type="text" class='text' value='1'>
        <input type="button" value="+" class='increment'>
        小计：<text class='all'>18.99</text>
    </div>
    <div class="box">
        商品总数：<text class='n_all'>0</text>
        商品总价：<text class='n_price'>0</text>   
    </div>

    全选：<input type="checkbox" class="checkall"><br>
    删除：<input type="checkbox" class='delete'><br>
    删除被选中的商品：<input type="checkbox" class='remove'><br>
    清空购物车：<input type="checkbox" class='cleanall'>


    <script>
        $(function(){
            // 全选操作
            $('.checkall').change(function(){
                var n = $(this).prop('checked');// 获取到全选控件的checked属性的状态
                $('.j-checkbox,.checkall').prop('checked',n);// prop('属性')表示获取属性值；prop('属性',值);表示设置某个属性的值
            });
            // 当商品控件全部被选中时，全选控件也要被勾选上。【思路：当商品控件被勾选的次数为3时，全选控件就能被选中
            // 商品控件的属性值每次发生变化都执行函数
            $('.j-checkbox').change(function(){
                // if(被选中的商品控件的个数===4){
                //     // 就要选中全选控件
                // }else{
                //     // 不选中全选控件
                // }
                // 表示获取到被选中的商品控件
                var i = $('.j-checkbox:checked');
                console.log($('.j-checkbox:checked'));// :checked选择器，查找被选中的控件
                // ==判断值是否相等，===除了判断值是否相等还要判断数据类型是否一样
                if(i.length===3){
                    $('.checkall').prop('checked','checked');
                }else{
                    // 否则就是商品控件没有被全选，全选控件可以不做处理
                }
            });


            // 随着商品数量的增减，改变商品金额小计的值  
            $('.increment').click(function(){
                 // 获取初始商品数量
                var n = $(this).siblings('.text').val();
                // 获取商品单价
                var price = $(this).siblings('.price').text();
                console.log(price);
                //当点击加号后，在商品数量初始值的基础上进行++
                $(this).siblings('.text').val(++n);
                // 获取变化后的商品数量---value值
                var x = $(this).siblings('.text').val();
                console.log(x);
                // 计算得到商品总价
                var money = x*price;
                console.log(money);
                // 将money赋值给小计的value
                $(this).siblings('.all').text(money);
                getSum();
            });
            // 当点击减号，在当前值的基础上进行自减
            $('.delcrement').click(function(){
                // 先获取商品数量的初始值，
                var n = $(this).siblings('.text').val();
                // 获取商品单价
                var price = $(this).siblings('.price').text();
                // 先判断商品数量是否=1  【先判断，再操作】  // 如果n===1，就跳出函数，所以每减一次都要将减完后的值赋值给input框，然后进行判断
                if(n==1){
                    return false;
                }
                // 操作减少商品数量---n的数值
                $(this).siblings('.text').val(--n);
                console.log(n);    
                // 获取变化后的商品数量
                var x = $(this).siblings('.text').val();
                // 计算得到减少后的商品总价
                var money = x*price;
                // 将money赋值给小计的value
                $(this).siblings('.all').text(money);   
                getSum();
            });

            getSum();
            // 如果用户直接输入商品数量，没有通过点击事件，那么就获取不到所有数据，商品总价也不会改变。
            // 假如用户不点击+ —按钮，而是直接在input框输入商品数量，就使用change函数。只要输入框发生变化，就会触发此函数
            $('.text').change(function(){
                // 获取到商品数量
                 var a = $(this).val();
                // 获取商品单价
                var b = $(this).siblings('.price').text();
                // 计算商品总价
                var m = a*b;
                // 将m赋值给商品总价的value值
                $(this).siblings('.all').text(m);
                getSum();
            });

            // 【计算总计和总额，封装一个函数】商品总数随所有商品的数量的变化而变化  首先遍历拿到所有商品的数据
            function getSum(){
                var count = 0;//计算总件数
                var money = 0;//计算总价钱
                // 遍历3个商品的商品数量
                $('.text').each(function(i,ele){
                    // 此处i是商品数组的索引号，ele是value属性值
                    count += parseInt($(ele).val());
                    // $(ele).val()表示获取到value属性值
                });
                $('.n_all').text(count);

                $('.all').each(function(i,ele){
                    // 此处i是商品数组的索引号，ele是value属性值
                    money += parseFloat($(ele).text());
                    // $(ele).val()表示获取到value属性值
                });
                // toFixed(2)保留两位小数   substr表示返回一个从指定位置开始截取的字符串
                $('.n_price').text(money.toFixed(2));
            };

            // 删除商品 empty()
            // 当点击删除控件,并且商品被勾选上时，被勾选上的商品就被删除  remove empty html("")
            $('.delete').click(function(){
                // 如果删除控件被勾选，就将被勾选上的商品控件删除
                $('.j-checkbox').click(function(){
                    $(this).parent().empty();
                    getSum();
                });
            });
            // 删除被选中的商品：
            $('.remove').click(function(){
                $('.j-checkbox:checked').parent().remove();
                getSum();
            });
            // 清空购物车 清空购物车后，商品总数0 商品总价0
            $('.cleanall').click(function() {
                $('.j-checkbox').parent().html("");
                getSum();
            });
            // 被选中的商品改变背景颜色
            $('.j-checkbox').change(function(){
                // 如果当前复选框是被勾选的
                if($(this).prop('checked')){
                    $(this).parent().css('background','orange');
                }else{
                    $(this).parent().css('background',"");
                }
            });
        
        })
    </script>
</body>
</html>